<template>
  <div class="inventory-result-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h2 class="page-title">
          <el-icon><Document /></el-icon>
          盘点结果
        </h2>
        <p class="page-description">查看盘点结果，包括盈亏分析、差异报告和调整建议</p>
      </div>
      <div class="header-actions">
        <el-button @click="handleExport">
          <el-icon><Download /></el-icon>
          导出报告
        </el-button>
        <el-button type="primary" @click="handleGenerateAdjustment">
          <el-icon><Edit /></el-icon>
          生成调整单
        </el-button>
        <el-button @click="handleRefresh">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
    </div>

    <!-- 搜索筛选区域 -->
    <div class="search-section">
      <el-card shadow="never">
        <el-form :model="searchForm" inline>
          <el-form-item label="盘点计划">
            <el-select v-model="searchForm.planId" placeholder="选择盘点计划" style="width: 200px" clearable>
              <el-option
                v-for="plan in planOptions"
                :key="plan.id"
                :label="plan.planName"
                :value="plan.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="仓库">
            <el-select v-model="searchForm.warehouseId" placeholder="选择仓库" style="width: 150px" clearable>
              <el-option
                v-for="warehouse in warehouseOptions"
                :key="warehouse.id"
                :label="warehouse.name"
                :value="warehouse.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="差异类型">
            <el-select v-model="searchForm.discrepancyType" placeholder="差异类型" style="width: 120px" clearable>
              <el-option label="全部" value="" />
              <el-option label="盈余" value="surplus" />
              <el-option label="亏损" value="loss" />
              <el-option label="无差异" value="none" />
            </el-select>
          </el-form-item>
          <el-form-item label="完成时间">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              查询
            </el-button>
            <el-button @click="handleReset">
              <el-icon><RefreshLeft /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 统计概览 -->
    <div class="overview-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon total">
                <el-icon><Box /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ overviewData.totalItems }}</div>
                <div class="stat-label">盘点商品总数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon surplus">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ overviewData.surplusItems }}</div>
                <div class="stat-label">盈余商品数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon loss">
                <el-icon><Bottom /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ overviewData.lossItems }}</div>
                <div class="stat-label">亏损商品数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon accuracy">
                <el-icon><CircleCheck /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ overviewData.accuracy }}%</div>
                <div class="stat-label">盘点准确率</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 盈亏分析图表 -->
    <div class="chart-section">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="never">
            <template #header>
              <div class="card-header">
                <span>盈亏分布</span>
                <el-button text @click="handleChartRefresh">
                  <el-icon><Refresh /></el-icon>
                </el-button>
              </div>
            </template>
            <div ref="pieChartRef" class="chart-container"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never">
            <template #header>
              <div class="card-header">
                <span>差异金额分析</span>
                <el-button text @click="handleChartRefresh">
                  <el-icon><Refresh /></el-icon>
                </el-button>
              </div>
            </template>
            <div ref="barChartRef" class="chart-container"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 详细结果列表 -->
    <div class="result-list">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>盘点结果详情</span>
            <div class="header-actions">
              <el-input
                v-model="tableSearchKeyword"
                placeholder="搜索商品名称或编码"
                style="width: 200px"
                clearable
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-button @click="handleBatchAdjust" :disabled="!selectedResults.length">
                <el-icon><Edit /></el-icon>
                批量调整
              </el-button>
            </div>
          </div>
        </template>

        <el-table
          :data="filteredResults"
          stripe
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :row-class-name="getRowClassName"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="planName" label="盘点计划" width="140" show-overflow-tooltip />
          <el-table-column prop="productCode" label="商品编码" width="120" />
          <el-table-column prop="productName" label="商品名称" min-width="200" show-overflow-tooltip />
          <el-table-column prop="category" label="分类" width="100" />
          <el-table-column prop="unit" label="单位" width="80" />
          <el-table-column prop="bookQuantity" label="账面数量" width="100" align="right" />
          <el-table-column prop="actualQuantity" label="实盘数量" width="100" align="right" />
          <el-table-column label="差异数量" width="100" align="right">
            <template #default="{ row }">
              <span :class="getDiscrepancyClass(row.discrepancy)">
                {{ row.discrepancy > 0 ? '+' : '' }}{{ row.discrepancy }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="unitPrice" label="单价" width="100" align="right">
            <template #default="{ row }">
              ¥{{ row.unitPrice.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="差异金额" width="120" align="right">
            <template #default="{ row }">
              <span :class="getDiscrepancyClass(row.discrepancyAmount)">
                {{ row.discrepancyAmount > 0 ? '+' : '' }}¥{{ Math.abs(row.discrepancyAmount).toFixed(2) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="discrepancyReason" label="差异原因" width="120" show-overflow-tooltip />
          <el-table-column prop="completedTime" label="完成时间" width="110" />
          <el-table-column prop="operator" label="操作员" width="100" />
          <el-table-column label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusTagType(row.adjustmentStatus)">{{ getStatusText(row.adjustmentStatus) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="{ row }">
              <el-button size="small" @click="handleViewDetail(row)">
                详情
              </el-button>
              <el-button size="small" type="primary" @click="handleAdjust(row)" v-if="row.discrepancy !== 0 && row.adjustmentStatus === 'pending'">
                调整
              </el-button>
              <el-button size="small" type="warning" @click="handleRecount(row)" v-if="row.adjustmentStatus === 'pending'">
                重盘
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="盘点结果详情"
      width="800px"
      :close-on-click-modal="false"
    >
      <div class="detail-content" v-if="currentDetailItem">
        <div class="detail-header">
          <div class="product-info">
            <h3>{{ currentDetailItem.productName }}</h3>
            <p>商品编码: {{ currentDetailItem.productCode }} | 分类: {{ currentDetailItem.category }}</p>
          </div>
          <el-tag :type="getStatusTagType(currentDetailItem.adjustmentStatus)" size="large">
            {{ getStatusText(currentDetailItem.adjustmentStatus) }}
          </el-tag>
        </div>

        <el-descriptions :column="2" border>
          <el-descriptions-item label="盘点计划">{{ currentDetailItem.planName }}</el-descriptions-item>
          <el-descriptions-item label="仓库位置">{{ currentDetailItem.warehouseName }}</el-descriptions-item>
          <el-descriptions-item label="账面数量">{{ currentDetailItem.bookQuantity }} {{ currentDetailItem.unit }}</el-descriptions-item>
          <el-descriptions-item label="实盘数量">{{ currentDetailItem.actualQuantity }} {{ currentDetailItem.unit }}</el-descriptions-item>
          <el-descriptions-item label="差异数量">
            <span :class="getDiscrepancyClass(currentDetailItem.discrepancy)">
              {{ currentDetailItem.discrepancy > 0 ? '+' : '' }}{{ currentDetailItem.discrepancy }} {{ currentDetailItem.unit }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="单价">¥{{ currentDetailItem.unitPrice.toFixed(2) }}</el-descriptions-item>
          <el-descriptions-item label="差异金额">
            <span :class="getDiscrepancyClass(currentDetailItem.discrepancyAmount)">
              {{ currentDetailItem.discrepancyAmount > 0 ? '+' : '' }}¥{{ Math.abs(currentDetailItem.discrepancyAmount).toFixed(2) }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="差异原因">{{ currentDetailItem.discrepancyReason || '无' }}</el-descriptions-item>
          <el-descriptions-item label="完成时间">{{ currentDetailItem.completedTime }}</el-descriptions-item>
          <el-descriptions-item label="操作员">{{ currentDetailItem.operator }}</el-descriptions-item>
        </el-descriptions>

        <div class="adjustment-history" v-if="currentDetailItem.adjustmentHistory && currentDetailItem.adjustmentHistory.length">
          <h4>调整历史</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(record, index) in currentDetailItem.adjustmentHistory"
              :key="index"
              :timestamp="record.time"
              placement="top"
            >
              <div class="timeline-content">
                <p><strong>{{ record.action }}</strong></p>
                <p>操作员: {{ record.operator }}</p>
                <p v-if="record.note">备注: {{ record.note }}</p>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="handleAdjust(currentDetailItem)" v-if="currentDetailItem && currentDetailItem.discrepancy !== 0 && currentDetailItem.adjustmentStatus === 'pending'">
            立即调整
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 调整对话框 -->
    <el-dialog
      v-model="adjustDialogVisible"
      title="库存调整"
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="adjust-content" v-if="currentAdjustItem">
        <div class="adjust-summary">
          <h4>{{ currentAdjustItem.productName }}</h4>
          <p>差异: {{ currentAdjustItem.discrepancy > 0 ? '+' : '' }}{{ currentAdjustItem.discrepancy }} {{ currentAdjustItem.unit }}</p>
          <p>差异金额: {{ currentAdjustItem.discrepancyAmount > 0 ? '+' : '' }}¥{{ Math.abs(currentAdjustItem.discrepancyAmount).toFixed(2) }}</p>
        </div>

        <el-form :model="adjustForm" label-width="100px">
          <el-form-item label="调整类型">
            <el-radio-group v-model="adjustForm.type">
              <el-radio label="auto">自动调整</el-radio>
              <el-radio label="manual">手动调整</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="调整数量" v-if="adjustForm.type === 'manual'">
            <el-input-number
              v-model="adjustForm.quantity"
              :precision="0"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="调整原因">
            <el-select v-model="adjustForm.reason" placeholder="请选择调整原因" style="width: 100%">
              <el-option label="盘点差异" value="inventory_discrepancy" />
              <el-option label="系统错误" value="system_error" />
              <el-option label="货物损耗" value="loss" />
              <el-option label="货物丢失" value="missing" />
              <el-option label="其他原因" value="other" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注说明">
            <el-input
              v-model="adjustForm.note"
              type="textarea"
              :rows="3"
              placeholder="请输入备注说明"
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="adjustDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAdjustSubmit">
            确认调整
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as echarts from 'echarts'
import {
  Document,
  Download,
  Edit,
  Refresh,
  Search,
  RefreshLeft,
  Box,
  TrendCharts,
  Bottom,
  CircleCheck
} from '@element-plus/icons-vue'

// 响应式数据
const loading = ref(false)
const detailDialogVisible = ref(false)
const adjustDialogVisible = ref(false)
const currentDetailItem = ref(null)
const currentAdjustItem = ref(null)
const selectedResults = ref([])
const tableSearchKeyword = ref('')
const pieChartRef = ref(null)
const barChartRef = ref(null)
let pieChart = null
let barChart = null

// 搜索表单
const searchForm = reactive({
  planId: '',
  warehouseId: '',
  discrepancyType: '',
  dateRange: []
})

// 调整表单
const adjustForm = reactive({
  type: 'auto',
  quantity: 0,
  reason: '',
  note: ''
})

// 分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0
})

// 选项数据
const planOptions = ref([])
const warehouseOptions = ref([])

// 统计概览数据
const overviewData = ref({
  totalItems: 0,
  surplusItems: 0,
  lossItems: 0,
  accuracy: 0
})

// 盘点结果列表
const resultList = ref([])

// 计算属性
const filteredResults = computed(() => {
  let results = resultList.value
  
  if (tableSearchKeyword.value) {
    const keyword = tableSearchKeyword.value.toLowerCase()
    results = results.filter(item => 
      item.productName.toLowerCase().includes(keyword) ||
      item.productCode.toLowerCase().includes(keyword)
    )
  }
  
  return results
})

// 方法
const getStatusText = (status) => {
  const statusMap = {
    pending: '待调整',
    adjusted: '已调整',
    ignored: '已忽略',
    recounted: '已重盘'
  }
  return statusMap[status] || status
}

const getStatusTagType = (status) => {
  const typeMap = {
    pending: 'warning',
    adjusted: 'success',
    ignored: 'info',
    recounted: 'primary'
  }
  return typeMap[status] || 'info'
}

const getDiscrepancyClass = (value) => {
  if (value > 0) return 'discrepancy-positive'
  if (value < 0) return 'discrepancy-negative'
  return ''
}

const getRowClassName = ({ row }) => {
  if (row.discrepancy > 0) return 'surplus-row'
  if (row.discrepancy < 0) return 'loss-row'
  return 'normal-row'
}

const loadData = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 加载选项数据
    planOptions.value = [
      { id: 1, planName: '2024年第一季度全盘' },
      { id: 2, planName: '电子产品类抽盘' }
    ]
    
    warehouseOptions.value = [
      { id: 1, name: '主仓库' },
      { id: 2, name: '分仓库A' }
    ]
    
    // 加载统计数据
    overviewData.value = {
      totalItems: 150,
      surplusItems: 12,
      lossItems: 8,
      accuracy: 86.7
    }
    
    // 加载结果列表
    resultList.value = [
      {
        id: 1,
        planName: '2024年第一季度全盘',
        productCode: 'P001',
        productName: 'iPhone 15 Pro',
        category: '电子产品',
        unit: '台',
        bookQuantity: 50,
        actualQuantity: 48,
        discrepancy: -2,
        unitPrice: 8999.00,
        discrepancyAmount: -17998.00,
        discrepancyReason: '货物丢失',
        completedTime: '2024-01-15 14:30',
        operator: '张三',
        adjustmentStatus: 'pending',
        warehouseName: '主仓库',
        adjustmentHistory: []
      },
      {
        id: 2,
        planName: '2024年第一季度全盘',
        productCode: 'P002',
        productName: 'MacBook Pro 16"',
        category: '电子产品',
        unit: '台',
        bookQuantity: 25,
        actualQuantity: 27,
        discrepancy: 2,
        unitPrice: 19999.00,
        discrepancyAmount: 39998.00,
        discrepancyReason: '未及时出库',
        completedTime: '2024-01-15 15:20',
        operator: '李四',
        adjustmentStatus: 'adjusted',
        warehouseName: '主仓库',
        adjustmentHistory: [
          {
            action: '库存调整',
            operator: '管理员',
            time: '2024-01-15 16:00',
            note: '系统自动调整'
          }
        ]
      },
      {
        id: 3,
        planName: '电子产品类抽盘',
        productCode: 'P003',
        productName: 'AirPods Pro',
        category: '电子产品',
        unit: '个',
        bookQuantity: 100,
        actualQuantity: 100,
        discrepancy: 0,
        unitPrice: 1999.00,
        discrepancyAmount: 0,
        discrepancyReason: '',
        completedTime: '2024-01-16 10:15',
        operator: '王五',
        adjustmentStatus: 'adjusted',
        warehouseName: '分仓库A',
        adjustmentHistory: []
      }
    ]
    
    pagination.total = resultList.value.length
    
    // 初始化图表
    nextTick(() => {
      initCharts()
    })
  } catch (error) {
    ElMessage.error('加载数据失败')
  } finally {
    loading.value = false
  }
}

const initCharts = () => {
  // 初始化饼图
  if (pieChartRef.value) {
    pieChart = echarts.init(pieChartRef.value)
    const pieOption = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '盈亏分布',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 130, name: '无差异', itemStyle: { color: '#67c23a' } },
            { value: 12, name: '盈余', itemStyle: { color: '#409eff' } },
            { value: 8, name: '亏损', itemStyle: { color: '#f56c6c' } }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    pieChart.setOption(pieOption)
  }
  
  // 初始化柱状图
  if (barChartRef.value) {
    barChart = echarts.init(barChartRef.value)
    const barOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['盈余金额', '亏损金额']
      },
      xAxis: {
        type: 'category',
        data: ['电子产品', '服装', '食品', '日用品', '图书']
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '¥{value}'
        }
      },
      series: [
        {
          name: '盈余金额',
          type: 'bar',
          data: [39998, 15000, 8000, 12000, 3000],
          itemStyle: {
            color: '#67c23a'
          }
        },
        {
          name: '亏损金额',
          type: 'bar',
          data: [-17998, -8000, -5000, -6000, -2000],
          itemStyle: {
            color: '#f56c6c'
          }
        }
      ]
    }
    barChart.setOption(barOption)
  }
}

const handleSearch = () => {
  pagination.currentPage = 1
  loadData()
}

const handleReset = () => {
  Object.assign(searchForm, {
    planId: '',
    warehouseId: '',
    discrepancyType: '',
    dateRange: []
  })
  handleSearch()
}

const handleRefresh = () => {
  loadData()
}

const handleChartRefresh = () => {
  if (pieChart) pieChart.resize()
  if (barChart) barChart.resize()
}

const handleSelectionChange = (selection) => {
  selectedResults.value = selection
}

const handleViewDetail = (row) => {
  currentDetailItem.value = row
  detailDialogVisible.value = true
}

const handleAdjust = (row) => {
  currentAdjustItem.value = row
  adjustForm.type = 'auto'
  adjustForm.quantity = Math.abs(row.discrepancy)
  adjustForm.reason = ''
  adjustForm.note = ''
  adjustDialogVisible.value = true
}

const handleRecount = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确认重新盘点商品 "${row.productName}" 吗？`,
      '确认重盘',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 模拟重盘操作
    row.adjustmentStatus = 'recounted'
    ElMessage.success('重盘申请已提交')
  } catch {
    // 用户取消
  }
}

const handleBatchAdjust = () => {
  if (selectedResults.value.length === 0) {
    ElMessage.warning('请选择要调整的记录')
    return
  }
  
  ElMessage.info('批量调整功能开发中')
}

const handleAdjustSubmit = () => {
  if (!adjustForm.reason) {
    ElMessage.warning('请选择调整原因')
    return
  }
  
  // 模拟调整操作
  currentAdjustItem.value.adjustmentStatus = 'adjusted'
  
  // 添加调整历史
  if (!currentAdjustItem.value.adjustmentHistory) {
    currentAdjustItem.value.adjustmentHistory = []
  }
  
  currentAdjustItem.value.adjustmentHistory.unshift({
    action: adjustForm.type === 'auto' ? '自动调整' : '手动调整',
    operator: '当前用户',
    time: new Date().toLocaleString(),
    note: adjustForm.note
  })
  
  adjustDialogVisible.value = false
  ElMessage.success('库存调整完成')
}

const handleExport = () => {
  ElMessage.info('导出功能开发中')
}

const handleGenerateAdjustment = () => {
  ElMessage.info('生成调整单功能开发中')
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
  loadData()
}

const handleCurrentChange = (page) => {
  pagination.currentPage = page
  loadData()
}

// 生命周期
onMounted(() => {
  loadData()
  
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    if (pieChart) pieChart.resize()
    if (barChart) barChart.resize()
  })
})
</script>

<style scoped>
.inventory-result-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left .page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.header-left .page-description {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.search-section,
.overview-section,
.chart-section,
.result-list {
  margin-bottom: 20px;
}

.stat-card {
  border: none;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.total {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.surplus {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
}

.stat-icon.loss {
  background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
}

.stat-icon.accuracy {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.chart-container {
  width: 100%;
  height: 300px;
}

.discrepancy-positive {
  color: #67c23a;
  font-weight: 600;
}

.discrepancy-negative {
  color: #f56c6c;
  font-weight: 600;
}

:deep(.surplus-row) {
  background-color: #f0f9ff;
}

:deep(.loss-row) {
  background-color: #fef0f0;
}

:deep(.normal-row) {
  background-color: #f9f9f9;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.detail-content {
  padding: 20px 0;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.product-info h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #303133;
}

.product-info p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.adjustment-history {
  margin-top: 24px;
}

.adjustment-history h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
}

.timeline-content p {
  margin: 4px 0;
  font-size: 14px;
}

.adjust-content {
  padding: 20px 0;
}

.adjust-summary {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.adjust-summary h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #303133;
}

.adjust-summary p {
  margin: 4px 0;
  font-size: 14px;
  color: #606266;
}

.dialog-footer {
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .inventory-result-container {
    padding: 10px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .header-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  
  .overview-section .el-col {
    margin-bottom: 16px;
  }
  
  .chart-section .el-col {
    margin-bottom: 20px;
  }
  
  .chart-container {
    height: 250px;
  }
  
  .header-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
</style>